<template>
  <el-container class="layout-container">
    <el-aside :width="isCollapse ? '64px' : '200px'">
      <div class="logo-container" :class="{ 'collapsed': isCollapse }">
        <div class="logo-icon">
          <el-icon size="32" color="#6366f1">
            <ShoppingBag />
          </el-icon>
        </div>
        <h1 v-show="!isCollapse" class="logo-text gradient-text">光乐购</h1>
      </div>
      <el-menu :router="false" :default-active="route.path" class="modern-menu"
        :background-color="isDark ? '#1e293b' : '#f8fafc'" :text-color="isDark ? '#ffffff' : '#374151'"
        :active-text-color="isDark ? '#6366f1' : '#6366f1'" :collapse="isCollapse"
        :collapse-transition="false" @select="handleMenuClick">
        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <ShoppingCart />
            </el-icon>
            <span class="menu-title">商品中心</span>
          </template>
          <el-menu-item index="/home/products">
            <el-icon>
              <Goods />
            </el-icon>
            <span class="menu-item-text">全部商品</span>
          </el-menu-item>
          <el-menu-item index="/home/hot-products">
            <el-icon>
              <Star />
            </el-icon>
            <span class="menu-item-text">热销商品</span>
          </el-menu-item>
          <el-menu-item index="/home/new-products">
            <el-icon>
              <Bell />
            </el-icon>
            <span class="menu-item-text">新品上架</span>
          </el-menu-item>
          <el-menu-item index="/home/flash-sale">
            <el-icon>
              <Timer />
            </el-icon>
            <span class="menu-item-text">限时秒杀</span>
          </el-menu-item>
        </el-sub-menu>

        <!-- 分类浏览菜单 - 仅管理员可见 -->
        <el-sub-menu index="2" v-if="isAdmin">
          <template #title>
            <el-icon>
              <Files />
            </el-icon>
            <span class="menu-title">分类浏览</span>
          </template>
          <el-menu-item index="/home/categories">
            <el-icon>
              <List />
            </el-icon>
            <span class="menu-item-text">商品分类</span>
          </el-menu-item>
        </el-sub-menu>

        <!-- 管理员专用菜单 -->
        <el-sub-menu index="admin" v-if="isAdmin">
          <template #title>
            <el-icon>
              <Setting />
            </el-icon>
            <span class="menu-title">系统管理</span>
          </template>
          <el-menu-item index="/home/flash-sale-admin">
            <el-icon>
              <Timer />
            </el-icon>
            <span class="menu-item-text">秒杀管理</span>
          </el-menu-item>
          <el-menu-item index="/home/flash-sale-monitor">
            <el-icon>
              <TrendCharts />
            </el-icon>
            <span class="menu-item-text">实时监控</span>
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu :index="isAdmin ? '3' : '2'">
          <template #title>
            <el-icon>
              <Collection />
            </el-icon>
            <span class="menu-title">订单管理</span>
          </template>
          <el-menu-item index="/home/cart">
            <el-icon>
              <ShoppingCart />
            </el-icon>
            <span class="menu-item-text">购物车</span>
          </el-menu-item>
          <el-menu-item index="/home/orders">
            <el-icon>
              <Tickets />
            </el-icon>
            <span class="menu-item-text">我的订单</span>
          </el-menu-item>
          <el-menu-item index="/home/favorites">
            <el-icon>
              <StarFilled />
            </el-icon>
            <span class="menu-item-text">收藏夹</span>
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu :index="isAdmin ? '4' : '3'">
          <template #title>
            <el-icon>
              <User />
            </el-icon>
            <span class="menu-title">个人中心</span>
          </template>
          <el-menu-item index="/home/profile">
            <el-icon>
              <Avatar />
            </el-icon>
            <span class="menu-item-text">个人信息</span>
          </el-menu-item>
          <el-menu-item index="/home/addresses">
            <el-icon>
              <Location />
            </el-icon>
            <span class="menu-item-text">收货地址</span>
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu :index="isAdmin ? '5' : '4'"
                     :background-color="isDark ? '#1e293b' : '#f8fafc'" :text-color="isDark ? '#e2e8f0' : '#374151'">
          <template #title>
            <el-icon>
              <Setting />
            </el-icon>
            <span >系统设置</span>
          </template>
          <el-menu-item index="/home/help">
            <el-icon>
              <QuestionFilled />
            </el-icon>
            <span>帮助中心</span>
          </el-menu-item>
          <el-menu-item index="/home/about">
            <el-icon>
              <InfoFilled />
            </el-icon>
            <span >关于我们</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>

    <el-container class="right-container">
      <el-header height="60px">
        <div class="header-left">
          <el-icon class="menu-icon" @click="toggleCollapse">
            <Expand />
          </el-icon>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ currentPath }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="header-right">
          <el-space>
            <el-input placeholder="搜索商品..." prefix-icon="Search" v-model="searchKeyword" @keyup.enter="handleSearch"
              class="search-input" />
            <el-tooltip :content="isDark ? '切换日间模式' : '切换夜间模式'" placement="bottom">
              <div class="theme-switch" @click="themeStore.toggleTheme">
                <img v-if="!isDark" src="../assets/月亮.jpg" style="width: 2vw; height: 2vw;" alt="月亮"
                  class="theme-icon" />
                <img v-else src="../assets/太阳.jpg" style="width: 2vw; height: 2vw;" alt="太阳" class="theme-icon" />
              </div>
            </el-tooltip>
            <el-tooltip content="全屏" placement="bottom">
              <img src="../assets/全屏.png" style="width: 2vw; height: 2vw;" alt="全屏" class="theme-icon"
                @click="toggleFullscreen" />
            </el-tooltip>
            <el-badge :value="cartCount" class="cart-badge">
              <el-button type="primary" icon="ShoppingCart" circle @click="goToCart"></el-button>
            </el-badge>
            <!-- 已登录用户显示用户信息 -->
            <el-dropdown v-if="isLoggedIn" @command="handleCommand">
              <div class="user-info">
                <el-avatar :size="32" :src="avatarUrl || userAvatar" />
                <span class="username">{{ userInfo.username || '游客' }}</span>
                <el-icon>
                  <CaretBottom />
                </el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">
                    <el-icon>
                      <UserFilled />
                    </el-icon>个人信息
                  </el-dropdown-item>
                  <el-dropdown-item command="orders">
                    <el-icon>
                      <Tickets />
                    </el-icon>我的订单
                  </el-dropdown-item>
                  <el-dropdown-item divided command="logout">
                    <el-icon>
                      <SwitchButton />
                    </el-icon>退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <!-- 未登录用户显示登录按钮 -->
            <el-button v-else type="primary" @click="goToLogin">
              <el-icon><User /></el-icon>
              登录
            </el-button>
          </el-space>
        </div>
      </el-header>

      <el-main ref="mainContent">
        <router-view></router-view>
      </el-main>

      <el-footer height="40px">
        <div class="footer-content">
          <span>© 2025 光乐购 v1.0.0</span>
          <span>技术支持：代飞哥</span>
        </div>
      </el-footer>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch, nextTick, onErrorCaptured } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'
import { useThemeStore } from '@/stores/theme'
import {
  ShoppingCart, Goods, Star, Bell, List, Files, Collection, Tickets,
  Avatar, Location, Setting, UserFilled, QuestionFilled, InfoFilled,
  Timer, Expand, FullScreen, CaretBottom, SwitchButton, User, TrendCharts
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const themeStore = useThemeStore()

// 添加错误捕获
onErrorCaptured((err, instance, info) => {
  console.error('路由错误:', err)
  return false
})

// 路由导航方法
const handleMenuClick = (path) => {
  if (route.path === path) {
    return // 如果是当前路径，不进行导航
  }
  router.push(path).catch(err => {
    if (err.name !== 'NavigationDuplicated') {
      console.error('导航错误:', err)
    }
  })
}

// 节流函数
const throttle = (func, limit) => {
  let inThrottle
  return function() {
    const args = arguments
    const context = this
    if (!inThrottle) {
      func.apply(context, args)
      inThrottle = true
      setTimeout(() => inThrottle = false, limit)
    }
  }
}

// 侧边栏状态
const isCollapse = ref(false)
const toggleCollapse = throttle(() => {
  isCollapse.value = !isCollapse.value
  // 强制重新计算布局，避免卡顿
  nextTick(() => {
    window.dispatchEvent(new Event('resize'))
  })
}, 200)

// 菜单状态优化 - 减少不必要的重新渲染
const menuKey = ref(0)
const refreshMenu = throttle(() => {
  menuKey.value++
}, 1000)

// 用户信息
const userInfo = computed(() => {
  const info = localStorage.getItem('userInfo')
  return info ? JSON.parse(info) : {}
})

const isAdmin = computed(() => userInfo.value.role === 'admin')

// 登录状态
const isLoggedIn = computed(() => {
  const token = localStorage.getItem('token')
  const hasUserInfo = !!userInfo.value.username
  console.log('登录状态检查:', { token: !!token, hasUserInfo, userInfo: userInfo.value })
  return !!token && hasUserInfo
})

// 用户头像
const userAvatar = computed(() => {
  return userInfo.value.gender === 'female'
    ? 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
    : 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
})

const avatarUrl = ref('')

// 更新头像的方法
const updateAvatar = (url) => {
  avatarUrl.value = url
}

// 搜索功能
const searchKeyword = ref('')
const handleSearch = () => {
  if (searchKeyword.value.trim()) {
    router.push({
      path: '/home/products',
      query: { keyword: searchKeyword.value.trim() }
    }).catch(err => {
      if (err.name !== 'NavigationDuplicated') {
        console.error('搜索导航错误:', err)
      }
    })
    searchKeyword.value = ''
  }
}

// 购物车功能
const cartCount = ref(0)
const goToCart = () => {
  handleMenuClick('/home/cart')
}

// 跳转到登录页
const goToLogin = () => {
  router.push('/login').catch(err => {
    if (err.name !== 'NavigationDuplicated') {
      console.error('登录导航错误:', err)
    }
  })
}

// 获取购物车数量
const fetchCartCount = async () => {
  try {
    const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')

    if (!userInfo.id) {
      // 如果未登录，从localStorage获取购物车数量
      const cartItems = JSON.parse(localStorage.getItem('cartItems') || '[]')
      cartCount.value = cartItems.reduce((total, item) => total + item.quantity, 0)
      return
    }

    // 如果已登录，从后端API获取购物车数量
    const res = await request.get(`/cart/count/${userInfo.id}`)
    if (res && res.code === 200) {
      cartCount.value = res.data || 0
    } else {
      cartCount.value = 0
    }
  } catch (error) {
    console.error('获取购物车数量失败:', error)
    // 如果API调用失败，回退到localStorage
    const cartItems = JSON.parse(localStorage.getItem('cartItems') || '[]')
    cartCount.value = cartItems.reduce((total, item) => total + item.quantity, 0)
  }
}

// 全屏切换
const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    }
  }
}

// 处理下拉菜单命令
const handleCommand = (command) => {
  switch (command) {
    case 'profile':
      handleMenuClick('/home/profile')
      break
    case 'orders':
      handleMenuClick('/home/orders')
      break
    case 'logout':
      handleLogout()
      break
  }
}

// 退出登录
const handleLogout = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('userInfo')
  localStorage.removeItem('sessionId')
  avatarUrl.value = '' // 清空头像URL
  router.push('/login').catch(err => {
    if (err.name !== 'NavigationDuplicated') {
      console.error('退出登录导航错误:', err)
    }
  })
}

const isDark = computed(() => themeStore.isDark)

// 监听路由变化，重置滚动位置
watch(() => route.fullPath, () => {
  // 确保DOM更新后执行滚动重置
  nextTick(() => {
    const mainEl = document.querySelector('.el-main')
    if (mainEl) {
      mainEl.scrollTop = 0
    }
  })
})

// 获取用户权限的方法
const fetchUserPermissions = async () => {
  try {
    const token = localStorage.getItem('token')
    if (!token) {
      console.warn('【权限更新】未找到token，无法获取权限')
      return null
    }

    const response = await request.get('/auth/permissions')
    if (response.code === 200 && response.data) {
      localStorage.setItem('userPermissions', JSON.stringify(response.data))
      return response.data
    } else {
      console.warn('【权限更新】获取权限失败:', response.message)
    }
    return null
  } catch (error) {
    console.error('【权限更新】获取用户权限失败:', error)
    return null
  }
}

// 菜单性能优化函数
const optimizeMenuPerformance = () => {
  // 为菜单添加性能优化
  const menuElement = document.querySelector('.modern-menu')
  if (menuElement) {
    // 启用CSS containment
    menuElement.style.contain = 'layout style'

    // 启用硬件加速
    menuElement.style.transform = 'translateZ(0)'
    menuElement.style.willChange = 'auto'

    // 优化子菜单
    const subMenus = menuElement.querySelectorAll('.el-sub-menu')
    subMenus.forEach((subMenu, index) => {
      subMenu.style.willChange = 'auto'
      subMenu.style.backfaceVisibility = 'hidden'
      subMenu.style.transform = 'translateZ(0)'

      // 优化子菜单展开动画
      const subMenuList = subMenu.querySelector('.el-menu')
      if (subMenuList) {
        subMenuList.style.willChange = 'height, opacity'
        subMenuList.style.transform = 'translateZ(0)'
      }
    })

    // 优化侧边栏
    const asideElement = document.querySelector('.el-aside')
    if (asideElement) {
      asideElement.style.willChange = 'width'
      asideElement.style.transform = 'translateZ(0)'
    }
  }
}

// 在组件挂载时自动获取权限
onMounted(() => {
  // 初始化主题
  themeStore.initTheme()

  // 从localStorage获取token
  const token = localStorage.getItem('token')

  // 如果有token，则获取最新的用户权限
  if (token) {
    fetchUserPermissions().then(permissions => {
      if (permissions) {
        // 权限获取成功
      } else {
        console.warn('【权限初始化】获取权限失败或权限为空')
      }
    })
  } else {
    console.warn('【权限初始化】未找到token，无法获取权限')
  }

  // 监听头像更新事件
  window.emitter.on('user-avatar-updated', updateAvatar)

  // 初始化头像
  const info = JSON.parse(localStorage.getItem('userInfo') || '{}')
  avatarUrl.value = info.icon || defaultAvatar.value

  // 获取购物车数量
  fetchCartCount()

  // 监听购物车更新事件
  window.emitter.on('cart-updated', fetchCartCount)

  // 监听用户登录状态变化
  window.emitter.on('user-login', () => {
    console.log('用户登录事件触发')
    // 强制更新用户信息
    nextTick(() => {
      const newInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
      avatarUrl.value = newInfo.icon || defaultAvatar.value
    })
  })

  // 延迟执行菜单性能优化，确保DOM已完全渲染
  nextTick(() => {
    setTimeout(optimizeMenuPerformance, 100)
  })
})

// 在组件卸载时移除事件监听和清理性能优化
onUnmounted(() => {
  window.emitter.off('user-avatar-updated', updateAvatar)
  window.emitter.off('cart-updated', fetchCartCount)
  window.emitter.off('user-login')

  // 清理菜单性能优化设置
  const menuElement = document.querySelector('.modern-menu')
  if (menuElement) {
    menuElement.style.contain = ''
    const subMenus = menuElement.querySelectorAll('.el-sub-menu')
    subMenus.forEach(subMenu => {
      subMenu.style.willChange = ''
      subMenu.style.backfaceVisibility = ''
    })
  }
})

// 当前路径
const currentPath = computed(() => {
  const pathMap = {
    '/home': '首页',
    '/home/products': '全部商品',
    '/home/hot-products': '热销商品',
    '/home/new-products': '新品上架',
    '/home/categories': '商品分类',
    '/home/flash-sale': '限时秒杀',
    '/home/flash-sale-admin': '秒杀管理',
    '/home/flash-sale-monitor': '实时监控',
    '/home/cart': '购物车',
    '/home/orders': '我的订单',
    '/home/favorites': '收藏夹',
    '/home/profile': '个人信息',
    '/home/addresses': '收货地址',
    '/home/help': '帮助中心',
    '/home/about': '关于我们'
  }
  return pathMap[route.path] || '首页'
})

// 默认头像
const defaultAvatar = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')
</script>

<style scoped>
.layout-container {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.logo-container {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  background-color: #4a5064;
  transition: all 0.3s;
  overflow: hidden;
  white-space: nowrap;
}

.logo-container.collapsed {
  padding: 0 12px;
}

.logo {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  flex-shrink: 0;
}

.logo-container h1 {
  color: #fff;
  font-size: 16px;
  margin: 0;
}

.right-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.el-aside {
  height: 100%;
  background-color: #545c64;
  transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  overflow-x: hidden;
  will-change: width;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.el-header {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
  z-index: 1;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.menu-icon {
  font-size: 20px;
  cursor: pointer;
  color: #606266;
}

.header-right {
  display: flex;
  align-items: center;
}

.action-icon {
  font-size: 20px;
  cursor: pointer;
  color: #606266;
  padding: 0 10px;
}

.action-icon:hover {
  color: #409EFF;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 0 10px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
  position: relative;
  z-index: 10;
}

.user-info:hover {
  background-color: rgba(64, 158, 255, 0.1);
}

.username {
  font-size: 14px;
  color: #606266;
}

.el-menu-vertical {
  height: calc(100% - 60px);
  border-right: none;
}

.el-main {
  background-color: #f5f7fa;
  padding: 20px;
  height: calc(100% - 100px);
  overflow-y: auto;
}

.el-footer {
  background-color: #fff;
  border-top: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 12px;
}

.footer-content {
  display: flex;
  gap: 20px;
}

.notification-list {
  padding: 10px;
}

.notification-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.notification-title {
  font-weight: bold;
  margin-bottom: 5px;
}

.notification-content {
  color: #606266;
  font-size: 14px;
  margin-bottom: 5px;
}

.notification-time {
  color: #909399;
  font-size: 12px;
}

:deep(.el-menu--collapse) {
  width: 64px;
}

:deep(.el-menu-item):hover,
:deep(.el-sub-menu__title):hover {
  background-color: #4a5064 !important;
}

.notice-badge :deep(.el-badge__content) {
  z-index: 2;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  margin-bottom: 10px;
}

.notification-actions {
  display: flex;
  gap: 10px;
}

.notification-item {
  position: relative;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: all 0.3s;
}

.notification-item:hover {
  background-color: #f5f7fa;
}

.notification-item.unread {
  background-color: #ecf5ff;
}

.notification-item.unread:hover {
  background-color: #e5f1ff;
}

.notification-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
}

.mark-read-btn {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.notification-item:hover .mark-read-btn {
  opacity: 1;
}

/* 优化深色模式下的菜单样式 */
html.dark .el-menu {
  background-color: #141414 !important;
  border-right: 1px solid var(--el-border-color);
}

html.dark .el-menu-item {
  color: #ffffff !important;
}

html.dark .el-menu-item:hover {
  background-color: #1f1f1f !important;
  color: #409EFF !important;
}

html.dark .el-menu-item.is-active {
  background-color: #409EFF !important;
  color: #ffffff !important;
}

html.dark .el-sub-menu__title {
  color: #ffffff !important;
}

html.dark .el-sub-menu__title:hover {
  background-color: #1f1f1f !important;
  color: #409EFF !important;
}

/* 添加深色模式的全局样式 */
html.dark {
  color-scheme: dark;
  --el-bg-color: #1d1e1f;
  --el-bg-color-overlay: #1d1e1f;
  --el-text-color-primary: #E5EAF3;
  --el-text-color-regular: #CFD3DC;
  --el-text-color-secondary: #A3A6AD;
  --el-border-color: #4C4D4F;
  --el-border-color-light: #363637;
  --el-fill-color-blank: #1d1e1f;
  --el-mask-color: rgba(0, 0, 0, 0.8);
}

html.dark .layout-container {
  background-color: var(--el-bg-color);
}

html.dark .el-aside {
  background-color: #141414;
}

html.dark .logo-container {
  background-color: #141414;
}

html.dark .el-header {
  background-color: #141414;
  border-bottom: 1px solid var(--el-border-color);
}

html.dark .el-main {
  background-color: var(--el-bg-color);
  color: var(--el-text-color-primary);
}

/* 夜间模式下的卡片样式 */
html.dark .modern-card {
  background-color: #2a2a2a !important;
  border-color: #404040 !important;
  color: var(--el-text-color-primary) !important;
}

/* 夜间模式下的输入框样式 */
html.dark .el-input__wrapper {
  background-color: #2a2a2a !important;
  border-color: #404040 !important;
  box-shadow: none !important;
}

html.dark .el-input__inner {
  color: var(--el-text-color-primary) !important;
  background-color: transparent !important;
}

/* 夜间模式下的按钮样式 */
html.dark .el-button {
  background-color: #2a2a2a !important;
  border-color: #404040 !important;
  color: var(--el-text-color-primary) !important;
}

html.dark .el-button:hover {
  background-color: #3a3a3a !important;
  border-color: #505050 !important;
}

/* 夜间模式下的菜单文字样式 */
html.dark .modern-menu .menu-title,
html.dark .modern-menu .menu-item-text {
  color: #ffffff !important;
}

html.dark .modern-menu .el-sub-menu__title {
  color: #ffffff !important;
}

html.dark .modern-menu .el-menu-item {
  color: #ffffff !important;
}

html.dark .modern-menu .el-menu-item:hover {
  color: #6366f1 !important;
}

html.dark .modern-menu .el-menu-item.is-active {
  color: #ffffff !important;
}

/* 夜间模式下的标签样式 */
html.dark .el-tag {
  background-color: #3a3a3a !important;
  border-color: #505050 !important;
  color: var(--el-text-color-primary) !important;
}

/* 夜间模式下的表格样式 */
html.dark .el-table {
  background-color: #2a2a2a !important;
  color: var(--el-text-color-primary) !important;
}

html.dark .el-table th {
  background-color: #3a3a3a !important;
  color: var(--el-text-color-primary) !important;
}

html.dark .el-table td {
  border-color: #404040 !important;
}

/* 夜间模式下的分页样式 */
html.dark .el-pagination {
  color: var(--el-text-color-primary) !important;
}

html.dark .el-pagination .el-pager li {
  background-color: #2a2a2a !important;
  color: var(--el-text-color-primary) !important;
  border-color: #404040 !important;
}

/* 夜间模式下的文本颜色 */
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 {
  color: var(--el-text-color-primary) !important;
}

html.dark p, html.dark span, html.dark div {
  color: var(--el-text-color-primary);
}

/* 夜间模式下的面包屑样式 */
html.dark .el-breadcrumb__item {
  color: var(--el-text-color-primary) !important;
}

html.dark .el-breadcrumb__item .el-breadcrumb__inner {
  color: var(--el-text-color-primary) !important;
}

/* 夜间模式下的下拉菜单样式 */
html.dark .el-dropdown-menu {
  background-color: #2a2a2a !important;
  border-color: #404040 !important;
}

html.dark .el-dropdown-menu__item {
  color: var(--el-text-color-primary) !important;
}

html.dark .el-dropdown-menu__item:hover {
  background-color: #3a3a3a !important;
}

/* 夜间模式下的用户名样式 */
html.dark .username {
  color: var(--el-text-color-primary) !important;
}

/* 夜间模式下的搜索框样式 */
html.dark .search-input .el-input__wrapper {
  background-color: #2a2a2a !important;
  border-color: #404040 !important;
}

html.dark .search-input .el-input__inner {
  color: var(--el-text-color-primary) !important;
}

html.dark .el-footer {
  background-color: #141414;
  border-top: 1px solid var(--el-border-color);
}

html.dark .action-icon {
  color: #ffffff !important;
  font-size: 22px;
}

html.dark .action-icon:hover {
  color: #409EFF !important;
  transform: scale(1.1);
  transition: all 0.3s;
}

html.dark .username {
  color: #ffffff !important;
}

html.dark .el-breadcrumb__item {
  color: #ffffff !important;
}

html.dark .el-breadcrumb__inner {
  color: #ffffff !important;
}

html.dark .el-breadcrumb__inner.is-link:hover {
  color: #409EFF !important;
}

html.dark .footer-content {
  color: #ffffff !important;
}

html.dark .el-badge__content {
  background-color: #f56c6c !important;
  color: #ffffff !important;
}

html.dark .el-dropdown-menu {
  background-color: #1d1e1f !important;
  border: 1px solid var(--el-border-color) !important;
}

html.dark .el-dropdown-menu__item {
  color: #ffffff !important;
}

html.dark .el-dropdown-menu__item:hover {
  background-color: #409EFF !important;
  color: #ffffff !important;
}

html.dark .el-drawer {
  background-color: #1d1e1f !important;
}

html.dark .el-drawer__header {
  color: #ffffff !important;
}

html.dark .el-tabs__item {
  color: #ffffff !important;
}

html.dark .el-tabs__item.is-active {
  color: #409EFF !important;
}

.theme-switch {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.theme-icon {
  width: 22px;
  height: 22px;
  object-fit: cover;
  border-radius: 50%;
}

.theme-icon:hover {
  transform: scale(1.1);
  transition: all 0.3s;
}

/* 现代化样式增强 */
.layout-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.logo-container {
  display: flex;
  align-items: center;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-primary);
  transition: all var(--transition-normal);
}

.logo-container.collapsed {
  justify-content: center;
  padding: var(--spacing-md);
}

.logo-icon {
  margin-right: var(--spacing-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  box-shadow: var(--shadow-md);
}

.logo-text {
  font-size: var(--text-xl);
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.modern-menu {
  border: none !important;
  background: var(--bg-primary) !important;
  box-shadow: var(--shadow-sm);
}

.modern-menu .el-sub-menu__title {
  font-weight: 600;
  border-radius: var(--radius-md);
  margin: 4px 8px;
  transition: background-color 0.15s ease;
}

.modern-menu .el-sub-menu__title:hover {
  background: var(--gray-50) !important;
}

.modern-menu .el-menu-item {
  border-radius: var(--radius-md);
  margin: 2px 8px;
  transition: background-color 0.15s ease;
}

.modern-menu .el-menu-item:hover {
  background: var(--primary-color) !important;
  color: white !important;
  transform: translateX(8px);
  box-shadow: var(--shadow-md);
}

.modern-menu .el-menu-item.is-active {
  background: var(--gradient-primary) !important;
  color: white !important;
  box-shadow: var(--shadow-lg);
}

.menu-title {
  font-weight: 600;
  color: var(--text-primary);
}

.menu-item-text {
  color: var(--text-secondary);
  font-weight: 500;
}

.el-aside {
  background: var(--bg-primary) !important;
  box-shadow: var(--shadow-lg);
  border-right: 1px solid var(--border-light);
}

.el-header {
  background: var(--bg-primary) !important;
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--border-light);
}

.el-main {
  background: var(--bg-secondary) !important;
  padding: var(--spacing-xl);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 var(--spacing-lg);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.action-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  cursor: pointer;
  background: var(--gray-50);
}

.action-icon:hover {
  background: var(--primary-color);
  color: white;
  transform: scale(1.1);
  box-shadow: var(--shadow-md);
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 2px solid var(--primary-color);
  transition: all var(--transition-fast);
}

.user-avatar:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-lg);
}

.breadcrumb-container {
  background: var(--bg-primary);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}

.page-content {
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-md);
  min-height: calc(100vh - 200px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .el-aside {
    position: fixed;
    z-index: var(--z-fixed);
    height: 100vh;
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
  }

  .el-aside.mobile-open {
    transform: translateX(0);
  }

  .el-main {
    margin-left: 0 !important;
    padding: var(--spacing-md);
  }

  .header-content {
    padding: 0 var(--spacing-md);
  }
}

/* 菜单样式优化 */
.modern-menu {
  border: none;
  background: transparent;
}

.modern-menu .el-sub-menu__title {
  height: 56px;
  line-height: 56px;
  padding: 0 20px;
  font-weight: 500;
  transition: background-color 0.15s ease;
}

.modern-menu .el-menu-item {
  height: 48px;
  line-height: 48px;
  padding: 0 20px 0 40px;
  transition: background-color 0.15s ease;
}

.modern-menu .el-menu-item:hover,
.modern-menu .el-sub-menu__title:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.modern-menu .el-menu-item.is-active {
  background-color: var(--el-color-primary);
  color: white;
}

/* 菜单展开动画优化 - 减少动画复杂度 */
.modern-menu .el-sub-menu .el-menu {
  transition: height 0.12s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: height;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 进一步优化菜单性能 */
.modern-menu {
  contain: layout style;
  transform: translateZ(0);
  will-change: auto;
}

.modern-menu .el-sub-menu {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 菜单文字样式 */
.menu-title,
.menu-item-text {
  font-weight: 500;
}

/* 菜单图标优化 - 移除transform动画以提升性能 */
.modern-menu .el-icon {
  /* 移除transform动画 */
}

/* 禁止菜单文本选择 */
.modern-menu,
.modern-menu * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* 优化菜单点击响应 */
.modern-menu .el-menu-item,
.modern-menu .el-sub-menu__title {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* 性能优化 - 减少重绘和回流 */
.modern-menu {
  contain: layout style;
  transform: translateZ(0); /* 启用硬件加速 */
}

.modern-menu .el-sub-menu {
  contain: layout;
}

/* 特别优化商品中心和分类浏览菜单 */
.modern-menu .el-sub-menu:nth-child(1),
.modern-menu .el-sub-menu:nth-child(2) {
  backface-visibility: hidden;
  perspective: 1000px;
}

/* 减少菜单展开时的重绘 */
.modern-menu .el-sub-menu .el-menu {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Element Plus 菜单组件性能优化 */
.el-sub-menu__title .el-sub-menu__icon-arrow {
  transition: transform 0.1s ease !important;
}

.el-menu--collapse .el-sub-menu > .el-sub-menu__title .el-sub-menu__icon-arrow {
  transform: none !important;
}

/* 禁用不必要的动画 */
.modern-menu .el-menu-item,
.modern-menu .el-sub-menu__title {
  animation: none !important;
}

/* 优化菜单项的渲染 */
.modern-menu .el-menu-item-group__title {
  padding: 7px 0 7px 20px !important;
  font-size: 12px !important;
}
</style>